<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 行为指南</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: white;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 10px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f5f5f5;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f5f5f5;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 57px);
                overflow-y: auto;
                padding-bottom: 10px;
            }
            .phase-tabs {
                display: flex;
                background-color: #ffffff;
                padding: 10px 16px;
                overflow-x: auto;
                white-space: nowrap;
                border-bottom: 1px solid #f5f5f5;
            }
            .phase-tab {
                padding: 8px 16px;
                margin-right: 10px;
                border-radius: 20px;
                font-size: 14px;
                color: #666;
                background-color: #f5f5f5;
            }
            .phase-tab.active {
                background-color: #ff9fb5;
                color: white;
            }
            .section-title {
                font-size: 16px;
                font-weight: 600;
                margin: 16px 16px 12px;
                color: #333;
            }
            .category-card {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 16px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .card-header {
                display: flex;
                align-items: center;
                padding: 14px 16px;
                border-bottom: 1px solid #f5f5f5;
            }
            .header-icon {
                width: 36px;
                height: 36px;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 12px;
                font-size: 18px;
                color: white;
            }
            .header-title {
                font-size: 16px;
                font-weight: 500;
            }
            .behavior-list {
                padding: 0;
            }
            .behavior-item {
                display: flex;
                align-items: flex-start;
                padding: 14px 16px;
                border-bottom: 1px solid #f5f5f5;
            }
            .behavior-item:last-child {
                border-bottom: none;
            }
            .behavior-icon {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 12px;
                flex-shrink: 0;
                font-size: 14px;
                color: white;
            }
            .behavior-content {
                flex: 1;
            }
            .behavior-title {
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 4px;
                color: #333;
            }
            .behavior-desc {
                font-size: 12px;
                color: #666;
                line-height: 1.4;
            }
            .tip-banner {
                background-color: #fff8e6;
                border-radius: 8px;
                padding: 12px 16px;
                margin: 16px;
                display: flex;
                align-items: center;
            }
            .banner-icon {
                color: #ffc107;
                font-size: 24px;
                margin-right: 12px;
                flex-shrink: 0;
            }
            .banner-content {
                font-size: 13px;
                line-height: 1.5;
                color: #666;
            }
            .search-bar {
                display: flex;
                align-items: center;
                background-color: #f5f5f5;
                border-radius: 8px;
                padding: 8px 12px;
                margin: 10px 16px;
            }
            .search-icon {
                color: #999;
                margin-right: 8px;
            }
            .search-input {
                background: transparent;
                border: none;
                outline: none;
                font-size: 14px;
                color: #333;
                width: 100%;
            }
            .bg-green {
                background-color: #4caf50;
            }
            .bg-red {
                background-color: #f44336;
            }
            .bg-orange {
                background-color: #ff9800;
            }
            .bg-blue {
                background-color: #2196f3;
            }
            .filter-chips {
                display: flex;
                padding: 10px 16px;
                overflow-x: auto;
                white-space: nowrap;
                background-color: #fff;
            }
            .filter-chip {
                display: inline-flex;
                align-items: center;
                padding: 6px 12px;
                margin-right: 8px;
                border-radius: 16px;
                font-size: 12px;
                color: #666;
                background-color: #f5f5f5;
            }
            .filter-chip.active {
                background-color: #ffeaef;
                color: #ff6b8b;
            }
            .filter-chip i {
                margin-right: 4px;
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left mr-4"></i>
                    <h1 class="text-lg font-medium">行为指南</h1>
                </div>
                <i class="fas fa-ellipsis-v"></i>
            </div>

            <!-- 阶段选择 -->
            <div class="phase-tabs">
                <div class="phase-tab active">备孕期</div>
                <div class="phase-tab">孕早期</div>
                <div class="phase-tab">孕中期</div>
                <div class="phase-tab">孕晚期</div>
                <div class="phase-tab">产后恢复</div>
            </div>

            <!-- 搜索栏 -->
            <div class="search-bar">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索行为建议..." />
            </div>

            <!-- 过滤标签 -->
            <div class="filter-chips">
                <div class="filter-chip active">
                    <i class="fas fa-check-circle"></i>
                    <span>全部</span>
                </div>
                <div class="filter-chip">
                    <i class="fas fa-check"></i>
                    <span>推荐行为</span>
                </div>
                <div class="filter-chip">
                    <i class="fas fa-times"></i>
                    <span>禁忌行为</span>
                </div>
                <div class="filter-chip">
                    <i class="fas fa-exclamation-circle"></i>
                    <span>注意事项</span>
                </div>
                <div class="filter-chip">
                    <i class="fas fa-heartbeat"></i>
                    <span>运动相关</span>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 温馨提示 -->
                <div class="tip-banner">
                    <div class="banner-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <div class="banner-content">
                        备孕期应保持规律作息，适量运动，远离有害物质，创造良好的生活环境和心理状态。
                    </div>
                </div>

                <!-- 推荐行为 -->
                <h2 class="section-title">推荐行为</h2>

                <div class="category-card">
                    <div class="card-header">
                        <div class="header-icon bg-green">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="header-title">生活习惯调整</div>
                    </div>
                    <div class="behavior-list">
                        <div class="behavior-item">
                            <div class="behavior-icon bg-green">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">规律作息</div>
                                <div class="behavior-desc">
                                    保持规律的作息时间，每晚睡前11点入睡，确保7-8小时高质量睡眠，有助于调整生理周期，提高卵子质量。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-green">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">适量运动</div>
                                <div class="behavior-desc">
                                    每周进行3-5次中等强度的有氧运动，如快走、游泳或瑜伽，每次30-45分钟，有助于维持健康体重和改善血液循环。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-green">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">保持心理平衡</div>
                                <div class="behavior-desc">
                                    学习放松技巧，如冥想、深呼吸练习等，每天花15-20分钟进行心理减压，避免过度焦虑影响生育激素分泌。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="category-card">
                    <div class="card-header">
                        <div class="header-icon bg-blue">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="header-title">医疗保健</div>
                    </div>
                    <div class="behavior-list">
                        <div class="behavior-item">
                            <div class="behavior-icon bg-green">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">孕前检查</div>
                                <div class="behavior-desc">
                                    在计划怀孕前3-6个月进行全面的孕前检查，包括血常规、尿常规、肝肾功能、传染病筛查等，确保身体健康状况适合怀孕。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-green">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">补充叶酸</div>
                                <div class="behavior-desc">
                                    在计划怀孕前3个月开始每天补充400微克叶酸，可以有效预防胎儿神经管畸形，建议在医生指导下选择合适的叶酸补充剂。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-green">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">定期监测基础体温</div>
                                <div class="behavior-desc">
                                    每天清晨醒来前测量基础体温并记录，连续3-6个月监测排卵规律，帮助确定最佳受孕时机。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 禁忌行为 -->
                <h2 class="section-title">禁忌行为</h2>

                <div class="category-card">
                    <div class="card-header">
                        <div class="header-icon bg-red">
                            <i class="fas fa-ban"></i>
                        </div>
                        <div class="header-title">不良习惯</div>
                    </div>
                    <div class="behavior-list">
                        <div class="behavior-item">
                            <div class="behavior-icon bg-red">
                                <i class="fas fa-times"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">吸烟喝酒</div>
                                <div class="behavior-desc">
                                    烟草和酒精会严重影响卵子和精子质量，增加不孕风险和胎儿出生缺陷。女性应完全戒烟戒酒，男性至少在受孕前3个月戒烟戒酒。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-red">
                                <i class="fas fa-times"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">过量摄入咖啡因</div>
                                <div class="behavior-desc">
                                    每日咖啡因摄入量应控制在200毫克以下(约1-2杯咖啡)，过量咖啡因与流产风险和生育能力下降相关。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-red">
                                <i class="fas fa-times"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">高强度运动</div>
                                <div class="behavior-desc">
                                    避免过度剧烈的运动，如马拉松训练、高强度间歇训练等，这可能导致排卵异常和月经不规律，影响受孕。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="category-card">
                    <div class="card-header">
                        <div class="header-icon bg-orange">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="header-title">环境因素</div>
                    </div>
                    <div class="behavior-list">
                        <div class="behavior-item">
                            <div class="behavior-icon bg-red">
                                <i class="fas fa-times"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">接触有害化学物质</div>
                                <div class="behavior-desc">
                                    避免接触杀虫剂、油漆、清洁剂等含有害物质的产品，使用时应佩戴防护手套和口罩，并确保室内通风良好。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-red">
                                <i class="fas fa-times"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">长时间使用电热毯或热水袋</div>
                                <div class="behavior-desc">
                                    避免腹部和生殖区域长时间暴露在高温环境中，过高的温度可能影响精子和卵子的质量。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-red">
                                <i class="fas fa-times"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">过度使用塑料容器</div>
                                <div class="behavior-desc">
                                    减少使用含有双酚A(BPA)的塑料制品，尤其是盛装热食物和饮料的容器，可能干扰内分泌系统。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 注意事项 -->
                <h2 class="section-title">特别注意事项</h2>

                <div class="category-card">
                    <div class="card-header">
                        <div class="header-icon bg-blue">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="header-title">男性伴侣注意事项</div>
                    </div>
                    <div class="behavior-list">
                        <div class="behavior-item">
                            <div class="behavior-icon bg-blue">
                                <i class="fas fa-info"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">避免高温环境</div>
                                <div class="behavior-desc">
                                    避免长时间桑拿、热水浴和使用笔记本电脑直接放在膝盖上，高温会影响精子生成和活力。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-blue">
                                <i class="fas fa-info"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">合理的性生活频率</div>
                                <div class="behavior-desc">
                                    排卵期期间每1-2天进行一次性生活，非排卵期可适当减少频率，过于频繁可能导致精子质量下降。
                                </div>
                            </div>
                        </div>
                        <div class="behavior-item">
                            <div class="behavior-icon bg-blue">
                                <i class="fas fa-info"></i>
                            </div>
                            <div class="behavior-content">
                                <div class="behavior-title">避免使用某些药物</div>
                                <div class="behavior-desc">
                                    某些药物如类固醇、某些抗生素和降压药可能影响精子质量，应在医生指导下调整或更换。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-calendar-alt text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-walking text-xl mb-1"></i>
                    <span>行为指南</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
